<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="../assets/vue.js"></script>
</head>
<body>
<h1>v-model实例</h1>
<hr>
<div id="app">
    <p>原始文本信息：{{message}}</p>
    <h3>文本框:</h3>
    <p>
        <input type="text" v-model="message">
        <input type="text" v-model.lazy="message">
        <input type="text" v-model.number="message">
        <input type="text" v-model.trim="message">
    </p>
    <hr>
    <h3>文本域双向绑定</h3>
    <textarea v-model="message" cols="30" rows="10"></textarea>
    <hr>
    <h3>多选框绑定一个值</h3>
    <input type="checkbox" id="isTrue" v-model="isTrue">
    <label for="isTrue">{{isTrue}}</label>
    <hr>
    <p>
        <input type="checkbox" id="zhangsan" value="zhangsan" v-model="checkName">
        <label for="zhangsan">zhangsan</label>
        <input type="checkbox" id="lisi" value="lisi" v-model="checkName">
        <label for="lisi">lisi</label>
        <input type="checkbox" id="wangwu" value="wangwu" v-model="checkName">
        <label for="wangwu">wangwu</label>
        你的选择是:{{checkName}}
    </p>
    <hr>
    <h3>单选框</h3>
    <p>
        <input type="radio" id="zhangsan1"  value="zhangsan" v-model="select">
        <input type="radio" id="lisi1"  value="lisi" v-model="select">
        <input type="radio" id="wangwu1"  value="wangwu" v-model="select">
        你的选择是：{{select}}
    </p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'Hello world!',
            isTrue:true,
            checkName:[],
            select:''
        }
    })
</script>
</body>
</html>